<template>
	<view>
		<!-- 返回 -->
		<view class="backs">
			<!-- <view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view> -->
			<text>{{title}}</text>
		</view>
		<!-- <view>
			<uni-drawer ref="drawer" mask="true"
			 mode="left" width="300">
			 <view class="dateSech">
			 	<view style="font-size: 32upx; margin-right: 20upx;">查询日期</view>
			 	<view class="searchBox">
			 		<input type="date" value="2018-11-15" class = "search"/>
			 	</view>
			 </view>
				<button type="primary" @click="closeDrawer">关闭</button>
			 </uni-drawer>
			 <button type="primary" @click="openDrawer">打开</button>
		</view> -->
		<view class="container">
			<TabBar  :tabIndex="tabindex" ></TabBar>
			<!-- 背景色区域 -->
			<view class="titleNview-background" :style="'background: url('+url()+'/wximg/bjTop1.png'+'); background-size: 100%;'" >
				<view class="text-wra">
					<view class="text-box">
						<text>线路名称：{{name}}</text>
					</view>
					<view class="model">
						<view>日期查询</view>
						<input :placeholder="today" type="date" disabled="disabled" @click="openCalendar">
						<uni-calendar :date="today" ref="statisDate" :insert="false" :lunar="false" :range="false" :clearDate="true"
						@change="changeDate"
						@confirm= "condirmDate"
						@monthSwitgh="changMonth"></uni-calendar>
						<image :src="url()+'/wximg/arrowrt.png'" style="width:20px; height:20px;" @click="openCalendar"></image>
					</view>	
					<!-- <view class="dateSech">
						<view style="font-size: 32upx; margin-right: 20upx;">查询日期</view>
						<view class="searchBox"> -->
					<!-- <view class="searchIcon"><image src="../../static/fangda.png"></image></view> -->
						<!-- 	<input type="date" value="2018-11-15" class = "search"/>
						</view> -->
				</view>
			</view>
	
			<view class="wrapper" :style="{height: heightContent+'px'}">
				<view class="tableBox">
					<view class="tabletitle">已配送</view>
					<view class="table">
						<wyb-table 
						header-bg-color="#fff" 
						first-col-bg-color="#fff" 
						content-bg-color="#fff"
						content-ft-color="#333333" 
						:height="heightContent-150 + 'px'"
						show-vert-border="false" 
						header-weight="true" 
						ref="table" 
						border-color="#ffffff"
						:key="key"
						:headers="headers2" 
						:contents="contents2" 
						width="100%" 
						:loading="loading"
						 @onCellClick="onCellClick"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import ReplaceTabBar from '@/api/ReplaceTabBar.js'
	import service from '../../service.js';
	import {SelectDeliveryTaskDetailList,selectDeliveryCarNum} from '@/api/request.js';
	import TabBar from '@/components/tabBar.vue'
	import url from '@/api/url.js';
	let user=service.getUsers().user;
	export default {
		components: {
			wybTable,
			TabBar
		},
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				url:url,
				heightContent:'',
				name: '',
				//表格
				key:0,
				today:'',
				deliveryTime:'',
				tabindex:3,
				loading:true,
				headers2:[],
				contents2:[],
				// 表格数据
				headers: [  {
					label: '商家',
					key: 'shopName',
					width:180,
				}, {
					label: '日期',
					key: 'deliveryConfirmTime',
					width:160,
				},{
					label: '包裹数量',
					key: 'packageCount',
					width:140,
				},
				{
					label: '配送总数',
					key: 'nums',
					width:190,
				}
				// , {
				// 	label: '运送车辆',
				// 	key: 'car',
				// 	width:140,
				// }, {
				// 	label: '异常',
				// 	key: 'unusual',
				// 	width:140,
				// },
				],
				contents: [{
					number: '56894202',
					date: '2020-12-2',
					business: '开心超市',
					quantity: '99',
					// car: '吉A45897',
					// unusual: ['异常', '/pages/login/login'],
					// listState:true,
					// listColor:[
					// 	{"element":0,"color":"#ef0000"},
					// 	{"element":1,"color":"#ef0000"},
					// 	{"element":2,"color":"#ef0000"},
					// 	{"element":3,"color":"#ef0000"}
					// ], 
				}, {
					number: '陈二',
					date: '18',
					business: '商学院',
					quantity: '98'
				}, {
					number: '张三',
					date: '22',
					business: '统计与数学学院'
				}, {
					number: '李四',
					date: '19',
					business: '城市与环境学院'
				}, {
					number: '王五',
					date: '20',
					business: '旅游与酒店管理学院'
				}, {
					number: '赵六 ',
					date: '20',
					business: ''
				}],
				urlCol: [{
					type: 'route',
					key: 'unusual'
				}, {
					 type: 'http',
					 key: 'link'
				}]
			};
		},
		onLoad() {
			user=service.getUsers().user;
			this.carname();
			this.init();
			//表格加载动画
			// this.wait(1000).then(() => {
			// 	this.headers2 = this.headers.slice()
			// 	this.contents2 = this.contents.slice()
			// 	this.loading = false
			// })
			// ReplaceTabBar(delivery)
		},
		onReady(){
			let that = this
			uni.getSystemInfo({
				success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
				// res - 各种参数
		　　    let info = uni.createSelectorQuery().select(".wrapper");// 获取某个元素
		　　　  info.boundingClientRect(function(data) { //data - 各种参数
					 let view  = res.windowHeight - data.top
					 that.heightContent = view
	　　        }).exec()
				}
			});		
			},
		methods: {
			backlast(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			changeDate(e){
				console.log(e)
			},
			changMonth(e){
				console.log(e)
			},
			openCalendar(){
				this.$refs.statisDate.open()
			},
			condirmDate(e){
				this.deliveryTime = e.year+"."+e.month+"."+this.isZero(e.date)
				this.init();
				this.today = e.fulldate
				console.log(e)
			},
			// openDrawer(){
			// 	this.$refs.drawer.open()
			// },
			// closeDrawer(){
			// 	this.$refs.drawer.close()
			// },
			//表格
			onCellClick(e) {
				let json = {}
				json.e = e
				json.name = this.name
				uni.navigateTo({
					url: '/pages/historyDelivered/detail?data='+encodeURIComponent(JSON.stringify(json)),
				})
			/* 	this.event = this.jsonShowFn(e)
				this.$refs.modal.showModal() */
			},
			carname(){//初始化列表
				let  param={
					userid:user.id,
				};
				selectDeliveryCarNum(param).then(res => {
					if (res.code == 200) {
						if(res.map.deliveryCarNum != null){
							this.name=res.map.deliveryCarNum.carNum
						}
					}
				}).catch(err => {
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
				
				
			},
			isZero(m){
			    return m<10?'0'+m:m
			},
			init(){//初始化列表
				let date = new Date();
				let year = date .getFullYear();
				let month = date .getMonth()+1;
				let day = date .getDate();
				this.today = this.isZero(year)+"-"+this.isZero(month)+"-"+this.isZero(day)
				if(this.deliveryTime == ''){
					this.deliveryTime = this.isZero(year)+"."+this.isZero(month)+"."+this.isZero(day)
				}
				let  param={
					deliveryUserId:user.id,
					deliveryConfirmTime:this.deliveryTime,
					/* deliveryStatus:2 */
					deliveryStatusList:["2","4","5"]
				};
				SelectDeliveryTaskDetailList(param).then(res => {
					if (res.code == 200) {
						this.contents=res.map.data;
						this.headers2 = this.headers.slice()
						this.contents2 = this.contents.slice()
						this.loading = false
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
				
				
			},
			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			}
		},

	}
</script>

<style scoped>
	.model {
		width: 91%;
		margin: 0 auto;
		bottom: -180upx;
		padding: 35upx 5%;
		border-radius: 27upx;
		background-color: #fff;
		z-index: 2;
		font-size:32upx;
		box-shadow: 0 5px 5px rgba(227,227,227,.5);
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height:70upx;
	}
	.model  input {
		height: 70rpx;
		line-height: 70upx;
		display: block;
	}
	/* 导航栏 */
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}
	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.wrapper {
		position: relative;
		width: 91%;
		margin: 0 auto;
		z-index: 2;
		border-top-left-radius:27upx;
		border-top-right-radius:27upx;
		background-color: #fff;
		z-index:0;
	}
	.text-wra {
		position: absolute;
		bottom:150upx;
		left: 5%;
		width: 91%;
		z-index: 2;
	}
	.text-box {		
		color: #fff;
		font-size: 32upx;
	}
	/* 日历 */
   .dateSech {
	   display: flex;
	   flex-direction: row;
	   margin:20upx auto;
	   position: relative;
	   line-height: 72upx;
	   color:#fff
   }
    .searchBox {
    	width:60%;
    	padding:0 5%;
    	height:72upx;
    	background-color: #fff;
    	border-radius:13upx;
    	border: solid 1px #007457;
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    }
    .search {
    	line-height:72upx;
    	color: #333;
    	width: 90%;
    	white-space: nowrap;
    	margin-left: 2%;
    }
    .searchIcon image{
    	width:37upx;
    	height:37upx;
    	margin-top:6px;
    }
	.tableBox {
		width: 100%;
		margin-top: 89upx;
		padding-bottom: 40upx;
	}

	.tabletitle {
		border-top-left-radius: 27upx;
		border-top-right-radius:27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size:36upx;
		letter-spacing: 2px;
	}
	.table {
		width: 96%;
		margin: 0 auto;
	}
</style>
